<template>
  <div class="case" style="height:100%">
    <el-row :gutter="20" style="margin:0;height:100%;">
      <el-col style="border:1px solid #039C82;margin:0;padding:0;height:1050px;" :span="16">
        <!-- title -->
        <div class="title">
          <div class="header-left">
            <span class="head">您的当前位置 :</span>
            <el-page-header style="font-size:20px;line-height: 50px;">
              <template #title>
                <span class="page" @click="back">首页</span>
              </template>
              <template #content>
                <span class="bing">专家介绍</span>
              </template>
            </el-page-header>
          </div>
          <span class="header-right">更多</span>
        </div>
        <!-- content -->
        <div class="content" style="height:87%">
          <!-- <div class="li-div" > -->
            <div class="box" v-for="(item,index) in doctors" :key="index">
              <div class="li-div-title">主治医师</div>
              <div class="li-div-content">
                <!-- 照片 -->
                <div class="picture">
                  <img src="@/assets/imgs/zj.jpg" alt />
                </div>
                <!-- 简介 -->
                <div class="brief">
                  <h3> {{item.name}} {{item.gender}} 1998-02-02</h3>
                  <div>
                    <p>籍贯 ：{{item.originplace}} </p>
                    <p>山西家里蹲大硕士 主治医师</p>
                    <p>{{item.department}} {{item.indications}}</p>
                    <p>挂号费：{{item.fee}}￥还包邮</p>
                  </div>

                  <!-- 预约弹框 -->
                  <my-make :doctor="item"></my-make>
                </div>
              </div>

              <div class="li-div-foot">
                {{jianjie | ellipsis}}
                <a href>[详情]</a>
              </div>
            </div>
            
          <!-- </div> -->
        </div>
        <!-- footer -->
        <div
          class="footer"
          style="width:100%;height:80px;display:flex;justify-content:center;algin-items:center;padding-top:20px;"
        >
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage3"
            :page-size="6"
            layout="prev, pager, next, jumper"
            :total="12"
          ></el-pagination>
        </div>
      </el-col>
      <el-col :span="8" style="padding:0;margin:0;height:100%;">
        <div class="col-right">
          <ul>
            <li>
              <div class="top">
                <span>医院简介</span>
                <span>更多</span>
              </div>
              <img style="width:100%;height:100px;" src="@/assets/imgs/1.jpg" alt="医院简介" />
              <p
                style="text-indent: 32px;"
              >山西大医院占地面积11万平方米，医疗区建筑面积13万平方米。设有58个临床医技科室，拥有职工2600余人，其中高级职称217人。拥有目前国际最先进的3.0 GE磁共振2台，GE大宝石CT 2台，国内首台730 DSA，以及伽玛刀、PET-CT、VCT、直线加速器等，仪器设备装备达到国内一流水平</p>
            </li>
            <li></li>
            <li></li>
          </ul>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Make from "@/components/make.vue";
export default {
  components: {
    "my-make": Make
  },
  data() {
    return {
      jianjie:
        "为人朴实正直，有积极进取的心态，努力拼搏。性格沉稳内敛，做事细心踏实，个性坚韧，能吃苦耐劳，对工作有很强的责任感!",
      dialogVisible: false,
      doctors:{},

    };
  },
  created(){
    this.searchPage({})
  },
  filters: {
    ellipsis(value) {
      let len = value.length;
      if (!value) return "";
      if (value.length > 56) {
        return value.substr(0, 56) + "......";
      }
      return value;
    }
  },
  methods: {
    // 回首页
    back() {
      this.$router.push({
        name: "main"
      });
    },
    handleCurrentChange(page){
      this.searchPage({page})
    },
    //分页查询
    searchPage({page = 1,limit = 6}){
      console.log(page);
      this.$http({
      url:'/doctor/getAll',
      params:{
        page,limit
      }
    })
    .then(res => {
      this.doctors = res.data
      console.log(res);
    })
    .catch(err => {
      if(err){
        console.log('内容不存在！');
      }
    })
    }
  }
};
</script>

<style scoped>
.li-div-foot {
  text-indent: 32px;
}
.yuyue {
  width: 100px;
  background-color: #1d9ee3;
  color: #fff;
  line-height: 30px;
  border-radius: 5px;
  cursor: pointer;
}
.brief {
  box-sizing: border-box;
  padding-left: 20px;
}
.li-div-content .brief h3 {
  margin: 10px 0;
}
.li-div-content .brief p {
  margin: 4px 0;
}
.brief h3,
.brief p {
  margin: 0;
}
.picture img {
  width: 100%;
  height: 100%;
}
.picture {
  width: 130px;
  height: 100%;
  box-sizing: border-box;
  padding: 5px;
}
.li-div-content {
  height: 180px;
  display: flex;
  border-bottom: 1px dashed gray;
}
.li-div-title {
  height: 30px;
  text-align: center;
  line-height: 30px;
  background-color: #039c82;
  color: #fff;
}
.box {
  box-sizing: border-box;
  width: 360px;
  border: 1px solid #039c82;
  margin: 0 20px;
  height: 280px;
  margin-top: 20px;
  margin-right: 10px;
}
.content {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.content .li-div {
  padding: 0 20px;
  width: 330px;
  height: 280px;
  margin-top: 20px;
  margin-right: 10px;
}
.case {
  width: 1200px;
  height: 1050px;
  margin: 0 auto;
}
.header-left {
  display: flex;
  margin: 0 20px;
}
.header-right {
  margin: 0 20px;
  cursor: pointer;
}
.title {
  display: flex;
  justify-content: space-between;
  height: 50px;
  background-color: #039c82;
  color: #fff;
  font-size: 18px;
  line-height: 50px;
}
.bing,
.page,
head {
  font-size: 18px;
  color: #fff;
}
.col-right ul li {
  /* margin:0; */
  margin-bottom: 30px;
  list-style: none;
  border: 1px solid #039c82;
  height: 430px;
}
.col-right ul li:first-child {
  height: 300px;
}
ul {
  margin: 0;
}
.top {
  display: flex;
  justify-content: space-between;
  height: 50px;
  line-height: 50px;
  color: #fff;
  background-color: #039c82;
}
.top span {
  margin: 0 20px;
}
.el-footer a {
  display: block;
  text-decoration: none;
  color: #039c82;
  margin-bottom: 10px;
}
</style>